<template>
  <el-tag
    :type="getTagType(source)"
    :color="getTagColor(source)"
    :effect="effect"
    :size="size"
    :closable="closable"
    @close="$emit('close')"
  >
    <el-icon v-if="showIcon" class="mr-1">
      <component :is="getSourceIcon(source)" />
    </el-icon>
    {{ getSourceLabel(source) }}
  </el-tag>
</template>

<script setup lang="ts">
import { 
  User, 
  Monitor, 
  Tools, 
  DataAnalysis, 
  UserFilled,
  QuestionFilled,
  Warning
} from '@element-plus/icons-vue'
import { DefectSource } from '@/types/defect'

interface Props {
  source: DefectSource
  effect?: 'dark' | 'light' | 'plain'
  size?: 'large' | 'default' | 'small'
  closable?: boolean
  showIcon?: boolean
}

withDefaults(defineProps<Props>(), {
  effect: 'light',
  size: 'default',
  closable: false,
  showIcon: true
})

defineEmits<{
  close: []
}>()

// 缺陷来源标签类型映射
const getTagType = (source: DefectSource) => {
  const typeMap: Record<DefectSource, 'success' | 'primary' | 'warning' | 'info' | 'danger'> = {
    [DefectSource.TESTING]: 'primary',
    [DefectSource.PRODUCTION]: 'danger',
    [DefectSource.CODE_REVIEW]: 'warning',
    [DefectSource.USER_FEEDBACK]: 'info',
    [DefectSource.MONITORING]: 'warning',
    [DefectSource.INTERNAL]: 'info',
    [DefectSource.EXTERNAL]: 'info'
  }
  return typeMap[source] || 'info'
}

// 缺陷来源标签颜色映射
const getTagColor = (source: DefectSource) => {
  const colorMap: Record<DefectSource, string> = {
    [DefectSource.TESTING]: '#3182ce',
    [DefectSource.PRODUCTION]: '#f56565',
    [DefectSource.CODE_REVIEW]: '#ed8936',
    [DefectSource.USER_FEEDBACK]: '#38b2ac',
    [DefectSource.MONITORING]: '#ed8936',
    [DefectSource.INTERNAL]: '#68d391',
    [DefectSource.EXTERNAL]: '#a0aec0'
  }
  return colorMap[source] || '#a0aec0'
}

// 缺陷来源标签文本映射
const getSourceLabel = (source: DefectSource) => {
  const labelMap: Record<DefectSource, string> = {
    [DefectSource.TESTING]: '测试',
    [DefectSource.PRODUCTION]: '生产环境',
    [DefectSource.CODE_REVIEW]: '代码审查',
    [DefectSource.USER_FEEDBACK]: '用户反馈',
    [DefectSource.MONITORING]: '监控发现',
    [DefectSource.INTERNAL]: '内部发现',
    [DefectSource.EXTERNAL]: '外部发现'
  }
  return labelMap[source] || '未知来源'
}

// 缺陷来源图标映射
const getSourceIcon = (source: DefectSource) => {
  const iconMap: Record<DefectSource, any> = {
    [DefectSource.TESTING]: Tools,
    [DefectSource.PRODUCTION]: Monitor,
    [DefectSource.CODE_REVIEW]: Monitor,
    [DefectSource.USER_FEEDBACK]: UserFilled,
    [DefectSource.MONITORING]: Warning,
    [DefectSource.INTERNAL]: User,
    [DefectSource.EXTERNAL]: DataAnalysis
  }
  return iconMap[source] || QuestionFilled
}
</script>

<style scoped>
.mr-1 {
  margin-right: 4px;
}
</style>